<template>
  <div class="section">
    <div class="border-row"></div>
    <div class="border-col"></div>
    
    <div class="section-header">活跃人力资源渠道</div>
     <div id="charts" ref="charts" :style="chartsDom" v-show="jz"></div>
    <div class="container_jz" :style="chartsDom" v-if="!jz">
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
            </div>
  </div>
</template>
<script>
import { get_TalentMonitor_TalentSource } from '@/api/data'
export default {
  data() {
    return {
      chartData: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    chartsDom() {
      return {
        width: (document.documentElement.clientWidth-30)/4 - 15 - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
    },
    pieData() {
      let all = this.chartData.length > 0 && eval(this.chartData.map(v=>v.value).join('+')) || 0;
      let tempArr = [];
      all && this.chartData.forEach((item,index)=>{
        let tempObj = item;
        tempObj['percent'] = Math.round((item.value/all)*100)
        tempArr.push(tempObj);
      });
      return tempArr;
    }
  },
  mounted() {
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    sumAdd(a,b){
      return parseInt(a)+parseInt(b)
    },
    init() {
      this.jz=false
      get_TalentMonitor_TalentSource(this.dateProp)
      .then(({data:{data}})=>{
        if(data && data.length > 0) {
          let dataaa = []
          dataaa.push({name:'人才市场',value:data[0].value})
          dataaa.push({name:'微信及其他',value:this.sumAdd(data[1].value,data[2].value)})
		  dataaa.push({name:'高校',value:data[3].value})
		  dataaa.push({name:'镇街',value:data[4].value})
          this.chartData = dataaa;
          this.$nextTick(_=>{
            this.jz=true
            this.chartInit();
          })
        }else{
          this.chartData = null;
        }
      })
    },
    chartInit() {
      let option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
              orient: 'vertical',
              left: 'auto',
              right: 0,
              top: '50%',
              padding: [-50,10,0,0],
              data: ['微信及其他','人才市场','高校','镇街'],
              textStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
              },
              // formatter: name => {
              //   let thisValue = this.pieData.find(v=>v.name === name).percent
              //   return `${name} ${thisValue}%`
              // }
			  formatter: function(name) {
			                // 获取legend显示内容
			                let data = option.series[0].data;
			                let total = 0;
			                let tarValue = 0;
			                for (let i = 0, l = data.length; i < l; i++) {
			                    total += data[i].value;
			                    if (data[i].name == name) {
			                        tarValue = data[i].value;
			                    }
			                }
			                let p = (tarValue / total * 100).toFixed(2);
			                return name + ' ' + ' ' + p + '%';
			            },
          },
          series: [
              {
                  name: '活跃人力资源渠道',
                  type: 'pie',
                  radius: ['50%', '70%'],
                  right: 150,
                  avoidLabelOverlap: false,
                  label: {
                      normal: {
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          show: true,
                          textStyle: {
                              fontSize: '14',
                              fontWeight: 'bold'
                          }
                      }
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },
                  data: this.pieData,
                  color: ['#4c7ef0','#fed866','#b86cc6','#3ce7c8']
              }
          ]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
</style>